import React from 'react';
import { inject, observer } from 'mobx-react';
import { Spin } from 'antd';
import { WeaTable, WeaPopoverHrm, WeaSelect, WeaLocaleProvider } from 'ecCom';
import { renderAlertPage, getCurrentHeight } from '../../../util/Util';
const getLabel = WeaLocaleProvider.getLabel;

/**
 * 绩效-考核结果分析-按人员
 * jiansong 2019/6/12
 */
@inject("scoreWorkerReportStore")
@observer
export default class ScoreWorkerReport extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            _height: getCurrentHeight(),
        }
        this.store = this.props.scoreWorkerReportStore;
    }

    render() {
        let { hasScore, loading, yearDatas, moreColumns, queryParams, data, total } = this.store;
        if (!hasScore) return renderAlertPage('<span style="color:red">' + getLabel('508762', '请先在考核设置中对分数段进行设置，再进行查询') + '</span>','','','',this.props.ecId || '');
        let { _height } = this.state;
        let columns = [
            {
                title: getLabel('30042', '人员'), dataIndex: 'lastname', width: 200, sorter: true,
                render: (text, record) => {
                    return <a href={'javaScript:openhrm(' + record.id + ');'} onClick={event => window.pointerXY(event)}>{text}</a>
                }
            },
            { title: getLabel('33553', '分部'), dataIndex: 'subcompanyname', width: 180 },
            { title: getLabel(27511, '部门'), dataIndex: 'departmentname', width: 180 }
        ];
        moreColumns.map((item, index) => {
            columns.push({
                title: <span title={item.title}>{item.gardename}</span>,
                dataIndex: 'l' + index,
                render: text => <span>{text == '' ? '0' : text}</span>,
                width: 100
            })
        });
        return (
            <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@169mdi`} spinning={loading}>
                <span className={'wea-workrelate-performance-socreWorkReport'}>
                    <WeaPopoverHrm ecId={`${this && this.props && this.props.ecId || ''}_WeaPopoverHrm@60rhhh`} />
                    <span className='year-date'>
                        <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@yxce5l`}
                            options={yearDatas}
                            value={queryParams.year}
                            viewAttr={2}
                            onChange={(year) => this.yearChange(year)}
                        />
                        <span>
                            {getLabel('508806', '{year}年考核分数段统计报表').replace('{year}', queryParams.year)}
                        </span>
                    </span>
                    <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@7n86zh`}
                        columns={columns}
                        bordered={true}
                        dataSource={data}
                        scroll={{ x: '100%', y:_height - 265 }}
                        pagination={{
                            total: total,
                            showTotal: () => getLabel(509103, `共{total}条`).replace('{total}', total),
                            current: queryParams.current,
                            showQuickJumper: true,
                            pageSize: queryParams.pageSize,
                            showSizeChanger: true,
                        }}
                        onChange={this.handleTableChange}
                    />
                </span>
            </Spin>
        )
    }

    //获取标签
    getTag = (name, color = 'red') => {
        return <div className='tag'>
            <div className={"tag-circle"} style={{ backgroundColor: color }}></div><span className={'title'}>{name}</span>
        </div>
    }

    //年份改变
    yearChange(year) {
        this.store.onSearchChange({ "year": year });
        this.store.getScoreWorkerReportData();
    };

    //表格改变
    handleTableChange = (pagination, filters, sorter) => {
        this.store.onSearchChange({
            "current": pagination.current,
            "pageSize": pagination.pageSize,
            "sort": sorter.order != undefined ? (sorter.order == 'ascend' ? 'asc' : 'desc') : 'asc'
        });
        this.store.getScoreWorkerReportData();
    };

}